<extend name="./public/frame.html"/>
<block name="content">
    <div class="layui-row">
        <div class="layui-col-xs12 layui-col-md6 layui-col-lg5">
            <div class="layui-row">
                <div class="layui-col-xs3">
                    <div class="layui-form">
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <select lay-verify="required" lay-search="" id="type">
                                    <option value="1">下单时间</option>
                                    <option value="2">上车时间</option>
                                    <option value="3">下车时间</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs9">
                    <div class="layui-form">
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <div class="layui-inline">
                                    <input type="text" class="layui-input date" readonly id="start" placeholder="开始时间">
                                </div>
                                <div class="layui-inline">
                                    <input type="text" class="layui-input date" readonly id="end" placeholder="结束时间">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-md6 layui-col-lg4">
            <div class="layui-row">
                <div class="layui-col-xs4">
                    <div class="layui-form">
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <select lay-verify="required" lay-search="" id="order_status">
                                    <option value="">订单状态</option>
                                    <volist name="order_status" id="status">
                                        <option value="{$key}">{$status}</option>
                                    </volist>
                                </select>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs4">
                    <div class="layui-form">
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input type="text" lay-verify="required|title" required placeholder="请输入车牌号"  class="layui-input" id="car_plate">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-col-xs4">
                    <div class="layui-form">
                        <div class="layui-inline">
                            <div class="layui-input-inline">
                                <input type="text" lay-verify="required|title" required placeholder="请输入手机号"  class="layui-input" id="user_phone">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs12 layui-col-md6 layui-col-lg2">
            <div class="layui-btn-group">
                <button class="layui-btn" data-type="search">搜索</button>
                <button class="layui-btn layui-btn-disabled" data-type="" id="reset">复位</button>
            </div>
        </div>
    </div>
    <table class="layui-table"
           lay-data="{cellMinWidth: 80, height:'auto', url:'{$url}', page: true,limit: 10, id:'order'}"
           lay-filter="order">
        <thead>
        <tr>
            <th lay-data="{checkbox:true,fixed: true}"></th>
            <th lay-data="{field:'common_id', width:80, fixed: true, sort: true}">ID</th>
            <th lay-data="{field:'order_sn', width:190, sort: true}">订单号</th>
            <th lay-data="{field:'passenger_phone', width:120, sort: true,}">乘客手机号</th>
            <th lay-data="{field:'order_time', width:160, sort: true,}">下单时间</th>
            <th lay-data="{field:'on_car_time', width:160, sort: true,}">上车时间</th>
            <th lay-data="{field:'off_car_time', width:160, sort: true,}">下车时间</th>
            <th lay-data="{field:'order_status', width:100,templet:statusTpl}">订单状态</th>
            <th lay-data="{field:'car_plate', width:100}">车牌号</th>
            <th lay-data="{fixed:'right', toolbar: '#barDemo', width:120, align:'center'}">操作</th>
        </tr>
        </thead>
    </table>

    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="local">行程轨迹</a>
    </script>
    <script type="text/html" id="statusTpl">
        {{#if(d.status==45){}}
        <span style="color: slateblue">{{d.order_status}}</span>
        {{#}else{}}
        <span style="color: fuchsia">{{d.order_status}}</span>
        {{#}}}
    </script>
    <script type="application/javascript">
        layui.use(['table', 'laytpl', 'laydate','form'], function () {
            var table = layui.table
                , form = layui.form
                , laydate = layui.laydate;
            lay('.date').each(function(){
                laydate.render({
                    elem: this
                    ,type: 'datetime'
                    ,trigger: 'click'
                });
            });
            //监听表格复选框选择
            table.on('checkbox(order)', function (obj) {
                console.log(obj)
            });
            //监听工具条
            table.on('tool(order)', function (obj) {
                var data = obj.data; //获得当前行数据
                var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
                var id = data.common_id;
                if (layEvent === 'local') {
                    layer.open({
                        type: 2,
                        title: '订单'+data.order_sn+'的轨迹信息',
                        shadeClose: true,
                        shade: 0.8,
                        area: ['100%', '100%'],
                        content: '{$trajectory}?order_type=1&common_id=' + id, //iframe的url
                    });
                }
            });

            var $ = layui.jquery, active = {
                search: function () {
                    var type = $('#type').val();
                    var start = $('#start').val();
                    var end = $('#end').val();
                    var order_status = $('#order_status').val();
                    var car_plate = $('#car_plate').val();
                    var user_phone = $.trim($('#user_phone').val());
                    var reset = $('#reset');
                    if(start||end||order_status||car_plate||user_phone){
                        reset.removeClass('layui-btn-disabled').addClass('layui-btn-normal').data('type', 'reset');
                        table.reload('order', {
                            url: '/admin/order_local_log/search',
                            where: {
                                type :type,
                                start : start,
                                end : end,
                                order_status : order_status,
                                car_plate : car_plate,
                                user_phone : user_phone,
                            } //设定异步数据接口的额外参数
                        });
                    }else{
                        reset.removeClass('layui-btn-normal').addClass('layui-btn-disabled').data('type', '');
                        layer.alert('搜索项不能为空');
                    }
                }
                , reset: function () {
                    var reset = $('#reset');
                    if (reset.data('type') !== '') {
                        table.reload('order', {
                            url: '/admin/order_local_log/table',where:{}
                        });
                    }
                    $('.layui-input').each(function () {                        $(this).val('');                    });                $('.layui-this').each(function () {$(this).removeClass('layui-this');});
                    reset.removeClass('layui-btn-normal').addClass('layui-btn-disabled').data('type', '');
                }
            };
            $('.layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });

    </script>
</block>
